import React, { Component } from "react";
import {
  Menu,
  Dropdown,
  Button,
  Card,
  DatePicker,
  Tabs,
  Select,
  Input,
  Icon,
  Table,
  Modal,
} from "antd";
import * as echarts from "echarts";
import LinkButton from "../../../components/link-button/index";

const { RangePicker } = DatePicker;
const { Option } = Select;
const { TabPane } = Tabs;

function NestedTable() {
  const menu = (
    <Menu>
      <Menu.Item>
        <LinkButton>关注</LinkButton>
      </Menu.Item>
      <Menu.Item>
        <LinkButton>日志</LinkButton>
      </Menu.Item>
      <Menu.Item>
        <LinkButton
          onClick={() => this.props.history.push("/OutreachAnalysis/detail")}
        >
          访问详情
        </LinkButton>
      </Menu.Item>
    </Menu>
  );
  const expandedRowRender = () => {
    const columns = [
      { title: "外联域名/外联公网IP", dataIndex: "date", key: "date" },
      { title: "请求次数", dataIndex: "name", key: "name" },
      {
        title: "分类",
        dataIndex: "state",
        key: "state",
      },
      { title: "标签", dataIndex: "upgradeNum", key: "upgradeNum" },
      {
        title: "操作",
        dataIndex: "operation",
        key: "operation",
        render: () => (
          <span>
            <LinkButton>加白</LinkButton> |
            <Dropdown overlay={menu}>
              <LinkButton
                className="ant-dropdown-link"
                onClick={(e) => e.preventDefault()}
              >
                更多
                <Icon type="down" />
              </LinkButton>
            </Dropdown>
          </span>
        ),
      },
    ];

    const data = [
      {
        key: 1,
        date: "192.168.32.15",
        name: "2.29k",
        state: "风险IP",
        upgradeNum: "恶意下载",
      },
    ];

    return <Table columns={columns} dataSource={data} pagination={false} />;
  };

  const columns = [
    { title: "资产IP", dataIndex: "name", key: "name" },
    { title: "资产类型", dataIndex: "type", key: "type" },

    { title: "地域", dataIndex: "territory", key: "territory" },
    {
      title: "访问流量",
      dataIndex: "flow",
      key: "flow",
      render: (str, column, index) => {
        if (column.flow) {
          let snArray = [];
          snArray = str.split(";");
          str = snArray.join("\n");
          let br = <br></br>;
          let result = null;
          if (snArray.length >= 2) {
            for (let i = 0; i < snArray.length; i++) {
              if (i === 0) {
                result = snArray[i];
              } else {
                result = (
                  <span>
                    {result}
                    {br}
                    {snArray[i]}
                  </span>
                );
              }
            }
            str = <div>{result}</div>;
          }
        }
        let html = <label>{str}</label>;

        return html;
      },
    },
    { title: "请求次数", dataIndex: "degree", key: "degree" },
    { title: "安全风险", dataIndex: "safety", key: "safety" },
    {
      title: "操作",
      key: "operation",
      render: () => (
        <span>
          <Dropdown overlay={menu}>
            <LinkButton
              className="ant-dropdown-link"
              onClick={(e) => e.preventDefault()}
            >
              更多
              <Icon type="down" />
            </LinkButton>
          </Dropdown>
        </span>
      ),
    },
  ];

  const data = [
    {
      key: 1,
      name: "资产IP",
      type: "ECS EIP",
      territory: "孟买",
      flow: "请求：191MB;响应：82MB",
      degree: "64M",
      safety: "正常资产",
    },
  ];

  return (
    <Table
      className="components-table-demo-nested"
      columns={columns}
      expandedRowRender={expandedRowRender}
      dataSource={data}
    />
  );
}

class home extends Component {
  constructor(props) {
    super(props);
    /* 
    弹框状态
    */
    this.state = { visible: false };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  options = () => {
    var chartDom = document.getElementsByClassName("main")[0];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "全部浏览趋势",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["请求流量", "流量峰值"],
      },
      grid: {
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        name: "时间",
        boundaryGap: false,
        data: [
          "2021-07-08",
          "2021-07-09",
          "2021-07-10",
          "2021-07-11",
          "2021-07-12",
          "2021-07-13",
          "2021-07-14",
        ],
      },
      yAxis: {
        name: "流量bps",
        type: "value",
        axisLabel: {
          formatter: "{value}kbps",
        },
      },
      series: [
        {
          name: "请求流量",
          type: "line",
          stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "流量峰值",
          type: "line",
          stack: "Total",
          data: [100, 150, 120, 130, 220, 240, 215],
        },
      ],
    };

    option && myChart.setOption(option);
  };
  options1 = () => {
    var chartDom = document.getElementsByClassName("main")[1];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "item",
      },

      // eslint-disable-next-line no-dupe-keys
      title: {
        text: "应用占比",
        left: "center",
        top: "50%",
        textStyle: {
          text: "80",
          textAlign: "center",
          fill: "#333",
          fontSize: 12,
          fontWeight: 600,
        },
      },

      legend: {
        left: "center",
      },

      series: [
        {
          name: "服务器",
          type: "pie",
          radius: ["30%", "60%"],
          data: [
            {
              value: 50,
              name: "WinCE",
              itemStyle: { color: "#6495ED" },
            },
            {
              value: 15,
              name: "FreeRTOS",
              itemStyle: { color: "#EE82EE" },
            },
            {
              value: 10,
              name: "VxWorks",
              itemStyle: { color: "#00FFFF" },
            },
            {
              value: 8,
              name: "windows",
              itemStyle: { color: "#9400D3" },
            },
            {
              value: 8,
              name: "CentOs",
              itemStyle: { color: "#7FFFAA" },
            },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  };

  componentDidMount() {
    this.options();
    this.options1();
  }

  render() {
    const menu = (
      <Menu>
        <Menu.Item>
          <LinkButton>关注</LinkButton>
        </Menu.Item>
        <Menu.Item>
          <LinkButton>日志</LinkButton>
        </Menu.Item>
        <Menu.Item>
          <LinkButton
            onClick={() => this.props.history.push("/OutreachAnalysis/detail")}
          >
            访问详情
          </LinkButton>
        </Menu.Item>
      </Menu>
    );
    const columns = [
      {
        title: "域名",
        dataIndex: "name",
        key: "name",
      },

      {
        title: "访问流量",
        dataIndex: "traffic",
        key: "traffic",
        render: (str, column, index) => {
          if (column.traffic) {
            let snArray = [];
            snArray = str.split(";");
            str = snArray.join("\n");
            let br = <br></br>;
            let result = null;
            if (snArray.length >= 2) {
              for (let i = 0; i < snArray.length; i++) {
                if (i === 0) {
                  result = snArray[i];
                } else {
                  result = (
                    <span>
                      {result}
                      {br}
                      {snArray[i]}
                    </span>
                  );
                }
              }
              str = <div>{result}</div>;
            }
          }
          let html = <label>{str}</label>;

          return html;
        },
      },
      {
        title: "请求次数",
        key: "requests",
        dataIndex: "requests",
      },
      {
        title: "分类",
        dataIndex: "classify",
      },
      {
        title: "标签",
        dataIndex: "label",
      },
      {
        title: "建议操作",
        dataIndex: "handle",
        render: () => (
          <span>
            <LinkButton>加白</LinkButton> |
            <Dropdown overlay={menu}>
              <LinkButton
                className="ant-dropdown-link"
                onClick={(e) => e.preventDefault()}
              >
                更多
                <Icon type="down" />
              </LinkButton>
            </Dropdown>
          </span>
        ),
      },
    ];

    const data = [
      {
        key: "1",
        name: "www.baidu.com",
        traffic: "请求：191MB;响应：82MB",
        requests: "79.31k",
        classify: "云产品",
        label: "热门网站",
      },
      {
        key: "2",
        name: "www.163.com",
        traffic: "请求：121MB;响应：82MB",
        requests: "79.31k",
        classify: "云产品",
        label: "热门网站",
      },
    ];
    const columns2 = [
      {
        title: "目的IP",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "端口数",
        dataIndex: "port",
        key: "port",
      },
      {
        title: "访问流量",
        dataIndex: "traffic",
        key: "traffic",
        render: (str, column, index) => {
          if (column.traffic) {
            let snArray = [];
            snArray = str.split(";");
            str = snArray.join("\n");
            let br = <br></br>;
            let result = null;
            if (snArray.length >= 2) {
              for (let i = 0; i < snArray.length; i++) {
                if (i === 0) {
                  result = snArray[i];
                } else {
                  result = (
                    <span>
                      {result}
                      {br}
                      {snArray[i]}
                    </span>
                  );
                }
              }
              str = <div>{result}</div>;
            }
          }
          let html = <label>{str}</label>;

          return html;
        },
      },
      {
        title: "请求次数",
        key: "requests",
        dataIndex: "requests",
      },
      {
        title: "分类",
        dataIndex: "classify",
      },
      {
        title: "标签",
        dataIndex: "label",
      },
      {
        title: "建议操作",
        dataIndex: "handle",
        render: () => (
          <span>
            <LinkButton>加白</LinkButton> |
            <Dropdown overlay={menu}>
              <LinkButton
                className="ant-dropdown-link"
                onClick={(e) => e.preventDefault()}
              >
                更多
                <Icon type="down" />
              </LinkButton>
            </Dropdown>
          </span>
        ),
      },
    ];

    const data2 = [
      {
        key: "1",
        name: "192.168.11.25",
        port: "2",
        traffic: "请求：191MB;响应：82MB",
        requests: "79.31k",
        classify: "云产品",
        label: "恶意下载",
      },
      {
        key: "2",
        name: "192.168.11.38",
        port: "2",
        traffic: "请求：121MB;响应：82MB",
        requests: "79.31k",
        classify: "云产品",
        label: "恶意下载",
      },
    ];
    /* 白名单的表格信息 */
    const columns1 = [
      {
        title: "域名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "关注时间",
        dataIndex: "time",
      },
      {
        title: "操作",
        dataIndex: "handle",
        render: () => (
          <span>
            <LinkButton>取消加白</LinkButton>
          </span>
        ),
      },
    ];

    const data1 = [
      {
        key: "1",
        name: "www.baidu.com",
        time: "2021-11-25/9:30",
      },
    ];
    const columns3 = [
      {
        title: "域名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "关注时间",
        dataIndex: "time",
      },
      {
        title: "操作",
        dataIndex: "handle",
        render: () => (
          <span>
            <LinkButton>取消关注</LinkButton>
          </span>
        ),
      },
    ];

    const data3 = [
      {
        key: "1",
        name: "192.168.16.13",
        time: "2021-11-25/9:30",
      },
    ];
    const columns4 = [
      {
        title: "应用",
        dataIndex: "use",
        key: "use",
      },
      {
        title: "端口",
        dataIndex: "port",
        key: "port",
      },
      {
        title: "请求流量",
        dataIndex: "beg",
        key: "beg",
      },
      {
        title: "响应流量",
        dataIndex: "response",
        key: "response",
      },
      {
        title: "访问次数",
        dataIndex: "visit",
        key: "visit",
      },
      {
        title: "操作",
        dataIndex: "handle",
        key: "handle",
        render: () => <LinkButton>日志</LinkButton>,
      },
    ];
    const dataSource4 = [
      {
        key: "1",
        use: "DNS",
        port: 53,
        beg: "1.56MB",
        response: "2.35MB",
        visit: "10.76k",
      },
      {
        key: "2",
        use: "Https",
        port: 443,
        beg: "1.56MB",
        response: "2.35MB",
        visit: "10.76k",
      },
    ];
    const operations = (
      <div>
        <span>
          <Icon type="calendar" style={{ fontSize: 18 }} />
        </span>
        &nbsp;&nbsp;&nbsp;
        <span>
          <Icon type="search" style={{ fontSize: 18 }} />
        </span>
      </div>
    );
    return (
      <div>
        <Card>
          <Dropdown overlay={menu} placement="bottomLeft">
            <Button>
              最近24小时
              <Icon type="down" />
            </Button>
          </Dropdown>
          <RangePicker />
          <div style={{ display: "flex", justifyContent: "space-around" }}>
            <div style={{ width: 200, borderRight: "1px solid #ececec " }}>
              <div style={{ marginTop: 15 }}>外联域名</div>
              <div style={{ marginTop: "10px" }}>
                <div
                  style={{
                    display: "inline-block",
                    marginTop: "10px",
                    marginRight: "10px",
                  }}
                >
                  <span
                    style={{
                      display: "inline-block",
                      color: "red",
                      fontSize: "20px",
                      marginRight: "5px",
                    }}
                  >
                    0
                  </span>
                  <span>风险</span>
                </div>
                <div style={{ display: "inline-block" }}>
                  <span
                    style={{
                      display: "inline-block",
                      fontSize: "20px",
                      marginRight: "5px",
                    }}
                  >
                    50
                  </span>
                  <span>全部</span>
                </div>
              </div>
            </div>
            <div style={{ width: 200, borderRight: "1px solid #ececec " }}>
              <div style={{ marginTop: 15 }}>外联目的IP</div>
              <div style={{ marginTop: "10px" }}>
                <div
                  style={{
                    display: "inline-block",
                    marginTop: "10px",
                    marginRight: "10px",
                  }}
                >
                  <span
                    style={{
                      display: "inline-block",
                      color: "red",
                      fontSize: "20px",
                      marginRight: "5px",
                    }}
                  >
                    8
                  </span>
                  <span>风险</span>
                </div>
                <div style={{ display: "inline-block" }}>
                  <span
                    style={{
                      display: "inline-block",
                      fontSize: "20px",
                      marginRight: "5px",
                    }}
                  >
                    300
                  </span>
                  <span>全部</span>
                </div>
              </div>
            </div>
            <div style={{ width: 200, borderRight: "1px solid #ececec " }}>
              <div style={{ marginTop: 15 }}>外联域名</div>
              <div style={{ marginTop: "10px" }}>
                <div
                  style={{
                    display: "inline-block",
                    marginTop: "10px",
                    marginRight: "10px",
                  }}
                >
                  <span
                    style={{
                      display: "inline-block",
                      color: "red",
                      fontSize: "20px",
                      marginRight: "5px",
                    }}
                  >
                    1
                  </span>
                  <span>风险</span>
                </div>
                <div style={{ display: "inline-block" }}>
                  <span
                    style={{
                      display: "inline-block",
                      fontSize: "20px",
                      marginRight: "5px",
                    }}
                  >
                    36
                  </span>
                  <span>全部</span>
                </div>
              </div>
            </div>
            <div style={{ width: 200, borderRight: "1px solid #ececec " }}>
              <div style={{ marginTop: 15 }}>外联域名</div>
              <div style={{ marginTop: "10px" }}>
                <div
                  style={{
                    display: "inline-block",
                    marginTop: "10px",
                    marginRight: "10px",
                  }}
                >
                  <span
                    style={{
                      display: "inline-block",
                      color: "red",
                      fontSize: "20px",
                      marginRight: "5px",
                    }}
                  >
                    0
                  </span>
                  <span>风险</span>
                </div>
                <div style={{ display: "inline-block" }}>
                  <span
                    style={{
                      display: "inline-block",
                      fontSize: "20px",
                      marginRight: "5px",
                    }}
                  >
                    7
                  </span>
                  <span>全部</span>
                </div>
              </div>
            </div>
          </div>
        </Card>
        <div>
          <Tabs defaultActiveKey="1" type="card">
            <TabPane tab="可视分析" key="1">
              <div>
                <Card>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-around",
                      height: 350,
                    }}
                  >
                    <div style={{ width: "30%" }}>
                      <Tabs
                        defaultActiveKey="1"
                        tabBarExtraContent={operations}
                      >
                        <TabPane tab="私网IP" key="1">
                          <div>
                            <div
                              style={{
                                background: "#ececec",
                                height: 40,
                                lineHeight: "40px",
                                marginTop: -16,
                              }}
                            >
                              &nbsp;&nbsp;
                              <Icon type="line-chart" />
                              &nbsp;&nbsp;&nbsp;&nbsp;
                              <span>全部流量趋势</span>
                            </div>
                            <div style={{ lineHeight: "40px" }}>
                              &nbsp;&nbsp;
                              <span>1</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>192.168.12.13</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>304.60kbps</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>更多</span>
                            </div>
                            <div style={{ lineHeight: "40px" }}>
                              &nbsp;&nbsp;
                              <span>2</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>192.168.12.13</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>304.60kbps</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>更多</span>
                            </div>{" "}
                            <div style={{ lineHeight: "40px" }}>
                              &nbsp;&nbsp;
                              <span>3</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>192.168.12.13</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>304.60kbps</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>更多</span>
                            </div>{" "}
                            <div style={{ lineHeight: "40px" }}>
                              &nbsp;&nbsp;
                              <span>4</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>192.168.12.13</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>304.60kbps</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>更多</span>
                            </div>
                          </div>
                        </TabPane>
                        <TabPane tab="公网IP" key="2">
                          <div>
                            <div
                              style={{
                                background: "#ececec",
                                height: 40,
                                lineHeight: "40px",
                                marginTop: -16,
                              }}
                            >
                              &nbsp;&nbsp;
                              <Icon type="line-chart" />
                              &nbsp;&nbsp;&nbsp;&nbsp;
                              <span>全部流量趋势</span>
                            </div>
                            <div style={{ lineHeight: "40px" }}>
                              &nbsp;&nbsp;
                              <span>1</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>192.168.12.13</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>304.60kbps</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>更多</span>
                            </div>
                            <div style={{ lineHeight: "40px" }}>
                              &nbsp;&nbsp;
                              <span>2</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>192.168.12.13</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>304.60kbps</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>更多</span>
                            </div>{" "}
                            <div style={{ lineHeight: "40px" }}>
                              &nbsp;&nbsp;
                              <span>3</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>192.168.12.13</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>304.60kbps</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>更多</span>
                            </div>{" "}
                            <div style={{ lineHeight: "40px" }}>
                              &nbsp;&nbsp;
                              <span>4</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>192.168.12.13</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>304.60kbps</span>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              <span>更多</span>
                            </div>
                          </div>
                        </TabPane>
                      </Tabs>
                    </div>
                    <div style={{ width: "800px" }} className="main"></div>
                  </div>
                </Card>
                <Card>
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <Card title="外联协议分析">
                      <div
                        className="main"
                        style={{ width: 300, height: 300 }}
                      ></div>
                    </Card>
                    <Card title="外联协议详情" style={{ width: 900 }}>
                      <Table dataSource={dataSource4} columns={columns4} />
                    </Card>
                  </div>
                </Card>
              </div>
            </TabPane>
            <TabPane tab="外联明细" key="2">
              <Tabs defaultActiveKey="1">
                <TabPane tab="外联域名" key="1">
                  <div>
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        width: "100%",
                        background: "#ececec",
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          padding: "10px 0",
                        }}
                      >
                        <div style={{ padding: 5 }}>
                          <span>外联域名总量：</span>
                          <span style={{ fontSize: 20 }}>50</span>
                        </div>
                        <div style={{ padding: 5 }}>
                          <span>策略未全覆盖域名：</span>
                          <span style={{ fontSize: 20 }}>50</span>
                        </div>
                        <div style={{ padding: 5 }}>
                          <span>风险域名：</span>
                          <span style={{ fontSize: 20, color: "red" }}>50</span>
                        </div>
                        <div style={{ padding: 5 }}>
                          <span>关注域名：</span>
                          <span style={{ fontSize: 20, color: "red" }}>50</span>
                        </div>
                        <div style={{ padding: 5 }}>
                          <span>加白域名：</span>
                          <span style={{ fontSize: 20, color: "red" }}>50</span>
                        </div>
                      </div>
                      <div
                        style={{ margin: "20px 10px 0 0" }}
                        onClick={this.showModal}
                      >
                        <LinkButton>白名单</LinkButton>/
                        <LinkButton>关注名单</LinkButton>
                      </div>
                      {/* 白名单关注弹窗 */}
                      <Modal
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                      >
                        <Tabs defaultActiveKey="1">
                          <TabPane tab="白名单" key="1">
                            <Tabs type="card">
                              <TabPane tab="目的域名" key="1">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns1} dataSource={data1} />
                              </TabPane>
                              <TabPane tab="目的IP" key="2">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <div style={{ marginTop: 5 }}>
                                  <span>地区： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Select
                                    style={{ width: "200px" }}
                                    defaultValue="模糊搜索"
                                  >
                                    <Option value="Home">全部产品</Option>
                                    <Option value="Company">Company</Option>
                                  </Select>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                </div>
                                <div style={{ marginTop: 5 }}>
                                  <span>运营商： </span>
                                  <Select
                                    style={{ width: "200px" }}
                                    defaultValue="模糊搜索"
                                  >
                                    <Option value="Home">全部产品</Option>
                                    <Option value="Company">Company</Option>
                                  </Select>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加目的IP</LinkButton>
                                </div>
                                <Table columns={columns1} dataSource={data1} />
                              </TabPane>
                              <TabPane tab="资产IP" key="3">
                                Content of Tab Pane 3
                              </TabPane>
                              <TabPane tab="目的端口" key="4">
                                Content of Tab Pane 4
                              </TabPane>
                            </Tabs>
                          </TabPane>
                          {/* 关注名单 */}
                          <TabPane tab="关注名单" key="2">
                            <Tabs type="card">
                              <TabPane tab="目的域名" key="1">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns1} dataSource={data1} />
                              </TabPane>
                              <TabPane tab="目的IP" key="2">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <div style={{ marginTop: 5 }}>
                                  <span>地区： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Select
                                    style={{ width: "200px" }}
                                    defaultValue="模糊搜索"
                                  >
                                    <Option value="Home">全部产品</Option>
                                    <Option value="Company">Company</Option>
                                  </Select>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                </div>
                                <div style={{ marginTop: 5 }}>
                                  <span>运营商： </span>
                                  <Select
                                    style={{ width: "200px" }}
                                    defaultValue="模糊搜索"
                                  >
                                    <Option value="Home">全部产品</Option>
                                    <Option value="Company">Company</Option>
                                  </Select>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加目的IP</LinkButton>
                                </div>
                                <Table columns={columns3} dataSource={data3} />
                              </TabPane>
                              <TabPane tab="资产IP" key="3">
                                Content of Tab Pane 3
                              </TabPane>
                              <TabPane tab="目的端口" key="4">
                                Content of Tab Pane 4
                              </TabPane>
                            </Tabs>
                          </TabPane>
                        </Tabs>
                      </Modal>
                    </div>
                    <div
                      style={{
                        marginTop: "10px",
                        display: "flex",
                        justifyContent: "space-between",
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          width: "750px",
                          justifyContent: "space-around",
                        }}
                      >
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">全部产品</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">全部分类</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">全部标签</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">域名</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Input style={{ width: 250 }} />
                        <Button type="primary">搜索</Button>
                      </div>
                      <div>
                        <Button style={{ marginRight: "5px" }}>
                          <Icon type="download" />
                        </Button>
                        <Button style={{ marginRight: "5px" }}>
                          <Icon type="reload" />
                        </Button>
                      </div>
                    </div>

                    <div style={{ marginTop: 10, marginRight: 10 }}>
                      <Table columns={columns} dataSource={data} />
                    </div>
                  </div>
                </TabPane>
                <TabPane tab="外联目的IP" key="2">
                  <div>
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        width: "100%",
                        background: "#ececec",
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          padding: "10px 0",
                        }}
                      >
                        <div style={{ padding: 5 }}>
                          <span>外联域名总量：</span>
                          <span style={{ fontSize: 20 }}>20246</span>
                        </div>
                        <div style={{ padding: 5 }}>
                          <span>策略未全覆盖域名：</span>
                          <span style={{ fontSize: 20 }}>20046</span>
                        </div>
                        <div style={{ padding: 5 }}>
                          <span>风险域名：</span>
                          <span style={{ fontSize: 20, color: "red" }}>50</span>
                        </div>
                        <div style={{ padding: 5 }}>
                          <span>关注域名：</span>
                          <span style={{ fontSize: 20, color: "red" }}>50</span>
                        </div>
                        <div style={{ padding: 5 }}>
                          <span>加白域名：</span>
                          <span style={{ fontSize: 20, color: "red" }}>50</span>
                        </div>
                      </div>
                      <div
                        style={{ margin: "20px 10px 0 0" }}
                        onClick={this.showModal}
                      >
                        <LinkButton>白名单</LinkButton>/
                        <LinkButton>关注名单</LinkButton>
                      </div>
                      {/* 白名单关注弹窗 */}
                      <Modal
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                      >
                        <Tabs defaultActiveKey="1">
                          <TabPane tab="白名单" key="1">
                            <Tabs type="card">
                              <TabPane tab="目的域名" key="1">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns1} dataSource={data1} />
                              </TabPane>
                              <TabPane tab="目的IP" key="2">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns1} dataSource={data1} />
                              </TabPane>
                              <TabPane tab="资产IP" key="3">
                                Content of Tab Pane 3
                              </TabPane>
                              <TabPane tab="目的端口" key="4">
                                Content of Tab Pane 4
                              </TabPane>
                            </Tabs>
                          </TabPane>
                          {/* 关注名单 */}
                          <TabPane tab="关注名单" key="2">
                            <Tabs type="card">
                              <TabPane tab="目的域名" key="1">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns3} dataSource={data3} />
                              </TabPane>
                              <TabPane tab="目的IP" key="2">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns3} dataSource={data3} />
                              </TabPane>
                              <TabPane tab="资产IP" key="3">
                                Content of Tab Pane 3
                              </TabPane>
                              <TabPane tab="目的端口" key="4">
                                Content of Tab Pane 4
                              </TabPane>
                            </Tabs>
                          </TabPane>
                        </Tabs>
                      </Modal>
                    </div>
                    <div
                      style={{
                        marginTop: "10px",
                        display: "flex",
                        justifyContent: "space-between",
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          width: "750px",
                          justifyContent: "space-around",
                        }}
                      >
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">全部产品</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">全部分类</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">全部标签</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">域名</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Input style={{ width: 250 }} />
                        <Button type="primary">搜索</Button>
                      </div>
                      <div>
                        <Button style={{ marginRight: "5px" }}>
                          <Icon type="download" />
                        </Button>
                        <Button style={{ marginRight: "5px" }}>
                          <Icon type="reload" />
                        </Button>
                      </div>
                    </div>

                    <div style={{ marginTop: 10, marginRight: 10 }}>
                      <Table columns={columns2} dataSource={data2} />
                    </div>
                  </div>
                </TabPane>
                <TabPane tab="外联资产" key="3">
                  <div>
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        width: "100%",
                        background: "#ececec",
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          padding: "10px 0",
                        }}
                      >
                        <div style={{ padding: 5 }}>
                          <span>主动外联资产数：</span>
                          <span style={{ fontSize: 20 }}>36</span>
                        </div>
                        <div style={{ padding: 5 }}>
                          <span>风险资产：</span>
                          <span style={{ fontSize: 20 }}>1</span>
                        </div>
                      </div>
                      <div
                        style={{ margin: "20px 10px 0 0" }}
                        onClick={this.showModal}
                      >
                        <LinkButton>白名单</LinkButton>/
                        <LinkButton>关注名单</LinkButton>
                      </div>
                      {/* 白名单关注弹窗 */}
                      <Modal
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                      >
                        <Tabs defaultActiveKey="1">
                          <TabPane tab="白名单" key="1">
                            <Tabs type="card">
                              <TabPane tab="目的域名" key="1">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns1} dataSource={data1} />
                              </TabPane>
                              <TabPane tab="目的IP" key="2">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns1} dataSource={data1} />
                              </TabPane>
                              <TabPane tab="资产IP" key="3">
                                Content of Tab Pane 3
                              </TabPane>
                              <TabPane tab="目的端口" key="4">
                                Content of Tab Pane 4
                              </TabPane>
                            </Tabs>
                          </TabPane>
                          {/* 关注名单 */}
                          <TabPane tab="关注名单" key="2">
                            <Tabs type="card">
                              <TabPane tab="目的域名" key="1">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns3} dataSource={data3} />
                              </TabPane>
                              <TabPane tab="目的IP" key="2">
                                <div>
                                  <span>域名： </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                  <Input style={{ width: 200 }} />
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <Button type="primary">搜索</Button>
                                  &nbsp;&nbsp;&nbsp;&nbsp;
                                  <LinkButton>添加域名</LinkButton>
                                </div>
                                <Table columns={columns3} dataSource={data3} />
                              </TabPane>
                              <TabPane tab="资产IP" key="3">
                                Content of Tab Pane 3
                              </TabPane>
                              <TabPane tab="目的端口" key="4">
                                Content of Tab Pane 4
                              </TabPane>
                            </Tabs>
                          </TabPane>
                        </Tabs>
                      </Modal>
                    </div>
                    <div
                      style={{
                        marginTop: "10px",
                        display: "flex",
                        justifyContent: "space-between",
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          width: "910px",
                          justifyContent: "space-around",
                        }}
                      >
                        <Select style={{ width: "130px" }} defaultValue="Home">
                          <Option value="Home">全部资产类型</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">全部地域</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "130px" }} defaultValue="Home">
                          <Option value="Home">全部关注情况</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "100px" }} defaultValue="Home">
                          <Option value="Home">全部资产</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Select style={{ width: "120px" }} defaultValue="Home">
                          <Option value="Home">资产公网IP</Option>
                          <Option value="Company">Company</Option>
                        </Select>
                        <Input style={{ width: 250 }} />
                        <Button type="primary">搜索</Button>
                      </div>
                      <div>
                        <Button style={{ marginRight: "5px" }}>
                          <Icon type="download" />
                        </Button>
                        <Button style={{ marginRight: "5px" }}>
                          <Icon type="reload" />
                        </Button>
                      </div>
                    </div>
                    <div style={{ marginTop: 10, marginRight: 10 }}>
                      <NestedTable />
                    </div>
                  </div>
                </TabPane>
              </Tabs>
            </TabPane>
          </Tabs>
        </div>
      </div>
    );
  }
}

export default home;
